var xhr = new XMLHttpRequest()

xhr.open('get','/product/list.json')

xhr.onload = function () {
    console.log(this.status)
    console.log(this.responseText)

    //进行json的转化
    var ret = JSON.parse(this.responseText)

    // 根据是否有 url 来判断是正确还是错误情况
    if(ret.url){
        let url = `/error/error.html?error="用户未登录，请先登录"&target=${ret.url}`
        location.assign(url)  // 到时候的跳转是我们通过 JS 自己完成的，不是 HTTP 层面上的重定向（浏览器自动完成）
        return;
    }

    var productList = ret.productViews;
    var oTbody = document.querySelector('tbody')
    // 通过遍历 productList，得到每一个 商品，根据商品中的值，修改 DOM 结构（为 <tbody> 添加一个 <tr> 一行
    for (var product of productList) {
        var html = "<tr>" +
            `<td>${product.productId}</td>` +
            `<td>${product.productname}</td>` +  // 反引号，模板字符串
            `<td>${product.description}</td>` +  // 反引号，模板字符串
            `<td>${product.stock}</td>` +  // 反引号，模板字符串
            `<td>${product.unit}</td>` +  // 反引号，模板字符串
            `<td>${product.price}</td>` +  // 反引号，模板字符串
            `<td>${product.discount}</td>` +  // 反引号，模板字符串
            `<td><a href="/product/withdraw.do?id=${product.productId}">下架</a></td>`+
            "</tr>";

        // 添加到 tbody 的内部
        oTbody.innerHTML += html
    }
}

xhr.send()
